<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="referrer" content="no-referrer">
    <title>FB广告图片处理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            /*控制元素在移动设备上是否使用滚动回弹效果*/
            font-family: Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC,
                Microsoft YaHei;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-size: 14px;
            padding: 20px;
        }
        
        .el-header-right {
            float: right;
        }

        .el-header-left .el-button + .el-button,
        .el-header-right .el-button + .el-button {
            margin-left: 0;
        }

        .el-table thead {
            color: #333333 !important;
        }

        .el-dialog {
            max-width: 100%;
        }

        .el-dialog__title {
            font-size: 14px !important;
        }

        .el-top {
            margin-top: 10px;
        }

        .el-icon-refresh {
            font-weight: bold;
        }
        
        .data-img {
            width: 100px;
            height: 100px;
            margin: auto;
            display: block;
            cursor: pointer;
        }

        .select-image-block {
            height: 50vh;
            overflow: auto;
        }

        .select-image-list {
            position: relative;
            width: 168px;
            height: 168px;
            margin: 0 20px 20px 0;
            display: inline-block;
            cursor: pointer;
        }

        .select-image-list .el-icon-error {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 20px;
            color: #333;
            z-index: 1;
        }

        .select-image-list .el-image {
            width: 100%;
            height: 100%;
            display: block;
        }

        .select-image-list input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            font-size: 0;
            cursor: pointer;
        }

        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #bcbcbc;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        
        <el-row>
            <el-col :span="24">
                <div class="el-header-right">
                    <el-button size="mini" type="primary" icon="el-icon-refresh" @click="getData()"></el-button>
                    <el-button size="mini" type="success" @click="addImageDialog = true">新增</el-button>
                    <el-button size="mini" type="primary" @click="saveData()">保存</el-button>
                    <el-button size="mini" type="primary" @click="batchPrice()">批量价格</el-button>
                    <el-button size="mini" type="danger" @click="batchDelete()">批量删除</el-button>
                    <el-button size="mini" type="warning" @click="batchExport()">批量导出</el-button>
                </div>
            </el-col>
        </el-row>

        <el-table class="el-top" ref="table" v-loading="loading" border :data="dataList" height="calc(100vh - 80px)" size="small">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="原图" align="center">
                <template slot-scope="scope">
                    <el-image class="data-img" :src="scope.row.sourceUrl" fit="scale-down" :preview-src-list="[scope.row.sourceUrl]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="处理后图" align="center">
                <template slot-scope="scope">
                    <el-image class="data-img" :src="scope.row.targetUrl" fit="scale-down" :preview-src-list="[scope.row.targetUrl]">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="价格" prop="markInfo" align="center">
                <template slot-scope="scope">
                    <el-input type="number" v-model.number="scope.row.markInfo" @keyup.enter.native="enterPrice(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="deleteData(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--上传图片弹框-->
        <el-dialog title="上传图片" :visible.sync="addImageDialog" width="1000px" :close-on-click-modal="false">
            <div class="select-image-block">
                <div class="select-image-list" v-for="(item, index) in uploadImageList.preview" :key="index">
                    <i class="el-icon-error" @click.stop="deleteUploadImage(index)"></i>
                    <el-image :src="item" fit="scale-down"></el-image>
                </div>
                <div class="select-image-list">
                    <el-image src="../img/select_img.jpg" lazy fit="scale-down"></el-image>
                    <input ref="uploadImage" type="file" accept="image/*" multiple @change="selectUploadImage($event)">
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addImageDialog = false">取 消</el-button>
                <el-button type="primary" :loading="addImageLoading" @click="addImageSure()">确 定</el-button>
            </span>
        </el-dialog>

        <!--批量价格弹框-->
        <el-dialog title="批量价格" :visible.sync="batchPriceDialog" width="500px" :close-on-click-modal="false">
            <el-form :model="batchPriceForm" size="medium" label-width="100px" @submit.native.prevent>
                <el-form-item label="价格 *">
                    <el-input type="number" v-model="batchPriceForm.markInfo" @keyup.enter.native="batchPriceSure()"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="batchPriceDialog = false">取 消</el-button>
                <el-button type="primary" :loading="batchPriceLoading" @click="batchPriceSure()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="../util/common.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data: function() {
            return {
                loading: false, // 加载状态
                dataList: [], // 数据列表
                addImageDialog: false, // 上传图片弹框
                uploadImageList: {
                    preview: [], // 预览图
                    images: [] // 文件
                },
                addImageLoading: false,
                batchPriceDialog: false, // 批量价格弹框
                batchPriceForm: {
                    markInfo: ''
                }, // 批量价格表单
                batchPriceLoading: false
            }
        },
        mounted() {
            // 获取数据
            this.getData()
        },
        methods: {
            // 获取数据
            getData: function () {
                this.loading = true
                requestDataParams('/image/list', 'GET', {
                    page: 0,
                    size: 10000
                }).then((response) => {
                    this.loading = false
                    var list = response.data.data.content
                    for (const i in list) {
                        list[i].sourceUrl = host + list[i].sourceUrl
                        list[i].targetUrl = host + list[i].targetUrl
                    }
                    this.dataList = list
                }).catch((error) => {
                    this.$message.error(error.data.data)
                    this.loading = false
                })
            },

            // 保存
            saveData: function () {
                var dataList = this.dataList
                var list = []
                for (const i in dataList) {
                    if (dataList[i].markInfo) {
                        list.push({
                            id: dataList[i].id,
                            markInfo: dataList[i].markInfo
                        })
                    }
                }
                requestData('/image/bind/markInfo', 'POST', list).then((response) => {
                    this.$message.success(response.data.data)
                    // 获取数据
                    this.getData()
                }).catch((error) => {
                    this.$message.error(error.data.data)
                })
            },

            // 回车价格
            enterPrice: function (index, e) {
                if (e.markInfo) {
                    requestData('/image/bind/markInfo', 'POST', [{
                        id: e.id,
                        markInfo: e.markInfo
                    }]).then((response) => {
                        this.$message.success(response.data.data)
                        // 获取数据
                        this.getData()
                    }).catch((error) => {
                        this.$message.error(error.data.data)
                    })
                }
            },

            // 批量价格弹框
            batchPrice: function () {
                var list = this.$refs.table.selection // 选中的数据
                if (list.length > 0) {
                    this.batchPriceForm = {
                        markInfo: ''
                    }
                    this.batchPriceDialog = true
                } else {
                    this.$message.error('请选中数据再进行操作')
                }
            },

            // 批量价格
            batchPriceSure: function () {
                if (this.checkBatchPrice()) {
                    this.batchPriceLoading = true
                    var list = this.$refs.table.selection // 选中的数据
                    var list_ = []
                    for (const i in list) {
                        list_.push({
                            id: list[i].id,
                            markInfo: this.batchPriceForm.markInfo
                        })
                    }
                    requestData('/image/bind/markInfo', 'POST', list_).then((response) => {
                        this.$message.success(response.data.data)
                        this.batchPriceLoading = false
                        this.batchPriceDialog = false
                        // 获取数据
                        this.getData()
                    }).catch((error) => {
                        this.$message.error(error.data.data)
                        this.batchPriceLoading = false
                    })
                }
            },

            // 校验批量价格
            checkBatchPrice: function () {
                let form = this.batchPriceForm
                if (form.markInfo === '' || form.markInfo === null || form.markInfo === undefined) {
                    this.$message.error('价格不能为空')
                    return false
                } else {
                    return true
                }
            },

            // 批量删除
            batchDelete: function () {
                var list = this.$refs.table.selection // 选中的数据
                var list_ = []
                if (list.length > 0) {
                    for (const i in list) {
                        list_.push(list[i].id)
                    }
                    requestDataFile('/image/delete', 'DELETE', {
                        idList: list_
                    }).then((response) => {
                        this.$message.success('删除成功')
                        // 获取数据
                        this.getData()
                    }).catch((error) => {
                        this.$message.error(error.data.data)
                    })
                } else {
                    this.$message.error('请选中数据再进行操作')
                }
            },

            // 导出
            batchExport: function () {
                var list = this.$refs.table.selection // 选中的数据
                var list_ = []
                if (list.length > 0) {
                    for (const i in list) {
                        if (list[i].targetImageName) {
                            list_.push({
                                fileUrl: list[i].targetUrl,
                                renameFileName: list[i].targetImageName
                            })
                        }
                    }

                    let zip = new JSZip()
                    let cache = {}
                    let promises = []
                    this.$message.success('正在加载压缩文件')
                    for (const i in list_) {
                        const promise = this.getImgArrayBuffer(list_[i].fileUrl).then(data => {
                            // 下载文件, 并存成ArrayBuffer对象(blob)
                            zip.file(list_[i].renameFileName, data, { binary: true }) // 逐个添加文件
                            cache[list_[i].renameFileName] = data
                        })
                        promises.push(promise)
                    }
                    Promise.all(promises).then(() => {
                        zip.generateAsync({ type: 'blob' }).then(content => {
                            this.$message.success('正在加载')
                            // 生成二进制流
                            saveAs(content, 'FB广告图片处理.zip') // 利用file-saver保存文件 自定义文件名
                            this.$message.success('压缩完成')
                        })
                    }).catch(res => {
                        this.$message.error('压缩失败')
                    })
                } else {
                    this.$message.error('请选中数据再进行操作')
                }
            },

            // 获取文件blob
            getImgArrayBuffer: function (url) {
                return new Promise((resolve, reject) => {
                    // 通过请求获取文件blob格式
                    let xmlhttp = new XMLHttpRequest()
                    xmlhttp.open('GET', url, true)
                    xmlhttp.responseType = 'blob'
                    xmlhttp.onload = function () {
                        if (this.status == 200) {
                            resolve(this.response)
                        } else {
                            reject(this.status)
                        }
                    }
                    xmlhttp.send()
                })
            },

            // 删除
            deleteData: function (index, e) {
                requestDataFile('/image/delete', 'DELETE', {
                    idList: [e.id]
                }).then((response) => {
                    this.$message.success('删除成功')
                    // 获取数据
                    this.getData()
                }).catch((error) => {
                    this.$message.error(error.data.data)
                })
            },

            // 选择上传图片
            selectUploadImage: function (e) {
                const list = e.target.files
                if (list.length > 0) {
                    for (let i = 0; i < list.length; i++) {
                        this.uploadImageList.preview.push(window.URL.createObjectURL(list[i])) // 预览图
                        this.uploadImageList.images.push(list[i]) // 文件
                    }
                } else {
                    this.$refs.uploadImage.value = ''
                }
            },

            // 删除上传图片
            deleteUploadImage: function (index) {
                this.uploadImageList.preview.splice(index, 1)
                this.uploadImageList.images.splice(index, 1)
            },

            // 上传图片
            addImageSure: function () {
                if (this.uploadImageList.preview.length > 0) {
                    this.addImageLoading = true
                    var param = {
                        file: this.uploadImageList.images
                    }
                    requestDataFile('/image/upload', 'POST', param).then((response) => {
                        this.$message.success('上传成功')
                        this.addImageLoading = false
                        this.addImageDialog = false
                        this.uploadImageList = {
                            preview: [], // 预览图
                            images: [] // 文件
                        }
                        this.$refs.uploadImage.value = ''
                        // 获取数据
                        this.getData()
                    }).catch((error) => {
                        this.$message.error(error.data.data)
                        this.addImageLoading = false
                    })
                } else {
                    this.$message.error('请选择图片')
                }
            }
        }
    })
</script>

</html>